<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: gray;
            user-select: none;
            z-index: -1000;
        }
        .box{
            z-index: -2;
            transition: all 0.5s ease-in-out;
            position: relative;
            width: 300px;
            height: 500px;
            background-color: white;
            margin-left: 30px;
            display: flex;
            justify-content: center;
            border-radius: 30px;
            overflow: hidden;
        }
        .box .head{
            z-index: -10;
            transition: all 0.3s ease-in-out;
            width: 60%;
            text-align: center;
            position: absolute;
            height: 30px;
            background-color: steelblue;
            border-radius: 0 0 10px 10px;
            padding: 5px;
            color: white;
        }
        .box .head::after{
            transition: all 0.5s ease-in-out;
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            background-color: steelblue;
            left: -40%;
            top: 0;
            z-index: -2;
            border-radius:0 0 50px 50px;
            opacity: 0;
        }
        .box .body{
            z-index: 1;
            margin-top: 30%;
            transition: all 0.5s ease-in-out;
        }
        .body h1{
            transition: all 0.5s ease-in-out;
            text-align: center;
            font-size: 10px;
        }
        .body h1 span:nth-of-type(1){
            font-size: 20px;
            vertical-align: super;
        }
        .body h1 span:nth-of-type(2){
            color: red;
            font-size: 50px;
            margin-left: 10px;
            margin-right: 10px;
            transition: all ease-in-out 0.3s;
        }
        .discription{
            text-align: center;
            padding: 10px;
            font-size: 10px;
            line-height: 25px;
            font-weight: 800;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            margin: 20px 0 20px 0;
            transition: all 0.5s ease-in-out;
        }
        .button{
            margin-left: 50%;
            transform: translateX(-50%);
            transition: all 0.5s ease-in-out;
        }
        .text div{
            margin-left: 50%;
            transform: translateX(-50%);
            transition: all 0.5s ease-in-out;
        }
        .text h3{
            margin-top: 20px;
            font-size: 15px;
            margin-left: 50%;
            width: 100%;
            transform: translateX(-46%);
            transition: all 0.5s ease-in-out;
        }
        .button{
            position: absolute;
            text-align: center;
            margin-top: 20%;
            font-size: 20px;
            height: 40px;
            line-height: 40px;
            box-sizing: content-box;
            padding: 3px;
            border: 1px solid steelblue;
            border-radius: 10px;
            color: steelblue;
            transform: translateX(-60%);
            margin-top: 140%;
            transition: all 0.5s ease-in-out;
        }
        .button:hover{
            -webkit-cursor: pointer;
        }
        .box:hover>.head::after{
            width: 180%;
            height: 400px;
            opacity: 1;
        }
        .box:hover>.body .discription{
            color: white;
        }
        .box:hover>.body h1{
            color: whitesmoke;
        }
        .box:hover>.body h1 span:nth-of-type(2){
            color: white;
        }
        .box:hover>.body .text> h3{
            color: white;
        }
        .box:hover>.body .text div h3{
            color: white;
        }
        .box:hover>.button{
            background-color: steelblue;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="head">
            <h3>ECS共享型s6</h3>
        </div>
        <div class="body">
            <h1><span>$</span><span>99</span>/年</h1>
            <div class="discription"><span>最新代产品，性能强劲，广泛适用于建站等轻量应用</span></div>
            <div class="text">
                <div> 
                    <h3>&#10004 2核4G</h3>
                    <h3>&#10004 1-5M可选</h3>
                    <h3>&#10004 个人用户专享</h3>
                </div>
            </div>
        </div>
        <div class="button">
            点击查看更多
        </div>
    </div>
    <div class="box">
        <div class="head">
            <h3>云数据库MySQL</h3>
        </div>
        <div class="body">
            <h1><span>$</span><span>1024</span>/年</h1>
             <div class="discription"><span>高安全等级，5倍性能提升</span></div>
            <div class="text">
                <div></div>
                <h3>&#10004 高安全等级，保证数据库安全性</h3>
                <h3>&#10004 多种内部架构，满足多类可用性要求</h3>
                <h3>&#10004 免去90%运维烦恼</h3>
            </div>
            
        </div>
        <div class="button">
            点击查看更多
        </div>
    </div>
    <div class="box">
        <div class="head">
            <h3>对象存储OSS存储包</h3>
        </div>
        <div class="body">
            <h1><span>$</span><span>99</span>/年</h1>
             <div class="discription"><span>适合图片/合成视频等多媒体数据存储</span></div>
            <div class="text">
                <h3>&#10004 深度集成数据处理服务</h3>
                <h3>&#10004 生命周期管理降低成本</h3>
            </div>
           
        </div>
        <div class="button">
            点击查看更多
        </div>
    </div>
</body>
</html>